<template>
		<view class="content">
			<block v-if="showPage">
		<view class="wrap" v-if="bannerImgList.length>0">
		<u-swiper @click="hanldeSwiperClick" bg-color="#fff" :effect3d="true" img-mode="scaleToFill" height="380" :border-radius="20" name="url" :list="bannerImgList"></u-swiper>
		</view>
		<view class="information-title">
		    <view class="title-price">
		        <view class="price-item">
		          <view class="price-item--now">￥{{ dataObj.betweenPrice|| '' }}</view>
		          <view class="price-item--pass" v-if="dataObj.betweenPrice !== dataObj.value">
		            ￥{{ dataObj.value }}
		          </view>
		        </view>
				<button v-if="phone&&openid" style="padding: 0rpx;" open-type="share" class="price-share" >
					<image src="../../static/shop/share.png" class="share-icon"/>
					分享
				</button>
		     </view>
		      <view class="title-title">{{ dataObj.name }}</view>
		      <view class="title-introduce">{{ dataObj.description }}</view>
		</view>
		<view class="information-detail">
		    <view class="detail-title">商品详情</view>
		    <view class="contain-img" >
		      <image mode="widthFix" class="detail-img" :src="item.url" v-for="(item, index) in dataObj.detailImgList" :key="index">
		    </view>
		</view>
		<view v-if="dataObj.evaluateList.length==0" style="margin-top: 60rpx; background: #fff">
		      <van-empty description="暂无商品评价，来做第一个评价的人吧！" />
		</view>
		<view v-else class="information-evaluate" @click="gotoEvaluate">
		    <view class="evaluate-title">
		      <view class="evaluate-title--star">
		        用户评价
		        <van-rate
		          v-model="dataObj.comprehensiveScore"
		          style="margin-left: 5vw"
		          color="#CB353B"
		          readonly
		        />
		      </view>
		      <view class="evaluate-title--num">
		        {{ dataObj.evaluateCount }}
		        <van-icon
		          name="arrow"
		          color="#C7C7CC"
		          style="margin-left:2vw"
		        />
		      </view>
		    </view>
		    <view class="evaluate-content">
		      <view class="evaluate-content--opt" v-for="(item, index) in dataObj.evaluateTagList" :key="index">
		         {{ item.tag }}({{ item.count }})
		      </view>
		      <view class="evaluate-content--info">
		        <view>
		          <view>
		            <image
					  :src="dataObj.evaluateList[0].evaluator.photoUrl||'../../static/shop/mine/head.png'"
		              style="margin-right: 4vw;width: 9vw;height: 9vw;border-radius: 50%;"
		            />
		            {{  dataObj.evaluateList[0].evaluator? dataObj.evaluateList[0].evaluator.realName : ""}}
		          </view>
		          <van-rate
		            v-model="dataObj.evaluateList[0].waresScore"
		            color="#CB353B"
		            size="15"
		            readonly
		          />
		        </view>
		        <view>
		          {{ dataObj.evaluateList[0].content }}
		        </view>
		      </view>
		    </view>
		  </view>
		<view v-if="dataObj.smWaresList.length === 0" style="margin-top: 5vw; background: #fff">
		      <van-empty description="商品太少啦！暂无猜你喜欢的商品！" />
		</view>
		<view v-else class="guess-contain">
			<view class="guess-title">
			    <view class="guess-title--text">猜你喜欢</view>
			    <view class="guess-title--more" @click="goHome">
			        查看全部<van-icon name="arrow" color="#CB353B" style="margin-left:2vw"/>
			    </view>
			</view>
			<van-divider />
			<view class="content-contain">
				<view class="content-item" v-for="(item, index) in dataObj.smWaresList" :key="index" @click="goDetail(item.id)">
					 <van-image width="28vw" height="28vw" fit="cover" radius="2vw" :src="item.thumbnail"/>
					 <view class="item-text">{{ item.name }}</view>
					 <view class="item-cost"><span>￥</span>{{ item.price }}</view>
				</view>
			</view>
		</view>
		<van-goods-action>
		  <button class="btn-fixed-wxChat" open-type="contact" @contact="handleContact" session-from="sessionFrom">
			  <image style="width: 32rpx;height: 32rpx;" src="../../static/shop/wxChat.png"></image>
			  <view class="btn-wxChat">客服</view>
		  </button>
		  <van-goods-action-icon @click="goCar" icon="cart-o" text="购物车" :info="carNumber" />
		  <van-goods-action-button @click="openSku" v-if="showAddCar"  text="加入购物车" type="warning" />
		  <van-goods-action-button @click="openSkuPurchase" color="#7232dd" text="立即购买" />
		</van-goods-action>
		<u-back-top :scrollTop="scrollTop" :customStyle="customStyle"  :iconStyle="iconStyle"></u-back-top>
		<sku
		  :show="showSku"
		  ref="sku"
		  :isPurchase="isPurchase"
		  @close="closePopup"
		  @confirmOrder="confirmOrder"
		  @hanldeAddCar="hanldeAddCar"
		/>
		<u-popup :mask-close-able="false" border-radius="54" mode="center" width="550rpx" height="300rpx"  v-model="showDialogUuid">
					<view class="content-title" >请先授权登录？</view>
					<view class="content-text">不登录无法正常体验！</view>
					<view class="btn-div">
						<!-- <navigator class="btn-cancle" open-type="exit" target="miniProgram">取消</navigator> -->
						<view class="btn-cancle" @click="handleClickCancleUuid">取消</view>
								<view class="line-xian"></view>
						<button @click="bindgetuser"  class="content-button"   type="success">确定</button>
					</view>
		 </u-popup>
		 <ComponentDialog @cancle="handleClickCanclePhone"  @getPhoneOk="init" title="申请获取手机号" tips="授权手机号后方可使用小程序!" :show="showDialogPhone"></ComponentDialog>
	    </block>
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	import Sku from "../../components/sku.vue";
	import ComponentDialog from '../dialog.vue'
	export default {
		components: {
		  Sku,
		  ComponentDialog,
		},
		data() {
			return {
				showAddCar:true,
				showPage:false,
				showSku:false,
				shared:false,
				isPurchase:false,
				showDialogUuid:false,
				showDialogPhone:false,
				carNumber:null,
				bannerImgList:[],
				dataObj:{},
				id:0,
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
				    color: '#fff',
				},
				customStyle:{
					background: 'black',
				},
				openid:"",
				phone:"",
				uUID:0,
				userId:null,
				shareUserId:null,
				isTest:0,
			}
		},
		onShareAppMessage() {
				if(uni.getStorageSync("uUID")){
				 	 if(!uni.getStorageSync("phone")){
				     	this.showDialogPhone=true 
					    throw new Error();
				 	}			 
				 }
				else {
				this.showDialogUuid=true
				throw new Error();
				}
			return {
			  title:  this.dataObj.name,
			  path: `/pages/detail/detail?id=${this.id}&shared=${true}&shareUserId=${this.userId}`
			}
		 },
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
		},
		onLoad(i) {
			this.id=Number(i.id);
			if(i.shared){
				this.shared=i.shared
				this.shareUserId=i.shareUserId
				this.showAddCar=false
			}
		  	this.init();
		},
		methods: {
			handleClickCancleUuid(){
				this.showDialogUuid=false
				uni.showTabBar();
			},
			handleClickCanclePhone(){
				this.showDialogPhone=false
				uni.showTabBar()
				 this.showPage=true;
			},
			handleContact (e) {
			        console.log(e.detail.path)
			        console.log(e.detail.query)
			},
			// call(){
			// 	// uni.makePhoneCall({
			// 	//     phoneNumber: '4006669918' 
			// 	// })
			// 	// #ifdef  MP-WEIXIN  
			// 	wx.openCustomerServiceChat({
			// 	  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc9adeec41d0e100c1'},
			// 	  corpId: ' ww431a0fbc3784cc2a',
			// 	  success(res) {
			// 		  console.log(res)
			// 	  },
			// 	  complete:(e)=>{
			// 		  console.log(e)
			// 	  },
			// 	})
			// 	// #endif
				
			// },
		  async	init(){
			  this.showPage=false;
			  uni.showLoading({
			  	title:"加载中"
			  });
			  uni.login().then((res)=>{
			  	console.log(res[1].code)
			  	let obj={}
			  	obj.code=res[1].code
			  	obj.key="ZHQQ_SM"
			   api.login(JSON.stringify(obj)).then((res)=>{
			  		 uni.setStorageSync("phone",res.data.body.phone)
			  		 this.phone=res.data.body.phone
			  		 this.openid=res.data.body.openId
			  		 uni.setStorageSync("openid",res.data.body.openid)
					 if(uni.getStorageSync("uUID")&&this.phone){
						api.BIZ_USER_PROFILE_SELECT_BY_USER_ID().then((res)=>{
							this.userId=res.data.body.id
							this.isTest=res.data.body.isTest
						});
						this.getCarNumber(); 
					 }
			  	}).catch()
			  });
				var obj={};
				  obj.id=Number(this.id);
				  if(uni.getStorageSync("uUID")&&this.phone){
					 obj.isTest=this.isTest; 
				  }
				  obj.shareUserId=Number(this.shareUserId);
				  console.log(obj)
				await api.SM_WARES_DETAIL(JSON.stringify(obj)).then((res)=>{
					console.log(res.data.body)
					if(res.data.body.state!==1){
						uni.showToast({
							title: "商品已下架！",
							icon:'none',
							duration:2000
						});
						setTimeout(()=>{uni.reLaunch({
							url: '/pages/index/index'
						})},2000)
						throw false;
					}
					 if(res.data.header.result_code==0){
						 this.bannerImgList=res.data.body.bannerImgList;
						 this.dataObj=res.data.body;
					 }  
				 })
				 uni.hideLoading();
				 this.showPage=true;
			},
			bindgetuser(){
			uni.getUserProfile({desc:"信息将用于服务",lang:"zh_CN"}).then((res)=>{
					  if(res[1]){
						    			   uni.setStorageSync("userInfo",res[1].userInfo)
						    			   let userinfo=res[1].userInfo
						    			 userinfo.openId=this.openid
						    			 userinfo.signature=res[1].signature
						    	    userinfo.encryptedData=res[1].encryptedData
						    		 userinfo.iv=res[1].iv
									 userinfo.key="ZHQQ_SM"
						    		 console.log(userinfo)
						    		api.register(JSON.stringify(userinfo)).then((res)=>{
						    			  uni.showTabBar()
						    		      this.showDialogUuid=false
										 //  api.BIZ_USER_PROFILE_SELECT_BY_USER_ID().then((res)=>{
										 //  	this.userId=res.data.body.id
											// this.isTest=res.data.body.isTest
										 //  });
						    	 }).catch((res)=>{
						    					  })
						            }else {
						    								  uni.showToast({
						    								    title: '拒绝授权将无法正常使用哦',
						    								    icon: 'none',
						    								    duration: 2000
						    								  })
						    							  }
						    			}) 
			},
			confirmOrder(e){
				var arr=[e]
				console.log(arr);
				uni.navigateTo({
					url:`../confirmOrder/confirmOrder?list=${JSON.stringify(arr)}&orderFrom=2&shareUserId=${this.shareUserId}`
				})
			},
			getCarNumber(){
				var parobj={nowPage: 1, pageSize: 9999, startRecord: 0, parameters: {}, condition: {oredCriteria: [[]]}}
				api.SM_SHOPPING_CART_LIST(JSON.stringify(parobj)).then((res)=>{
					var list=res.data.body.exhibitDatas.filter(item=>item.model.stock>0);
					 if(list.length>0){
						this.carNumber=list.length;
					 }
				})
			},
			hanldeAddCar(e){
				var obj={wares:{id:Number(e.orderId)},model:{id:e.modelId},count:e.count}
				api.SM_SHOPPING_CART_SAVE(JSON.stringify(obj)).then((res)=>{
					 if(res.data.header.result_code==0){
						 this.showSku=false;
						 this.getCarNumber();
						 uni.showToast({
						 	title: "添加成功！",
						 	icon:'success',
						 	duration:2000
						 })  
					 }
				})
			},
			//授权判断
			judge(fun){
				fun.bind(this);
				if(this.shared){
					uni.login().then((res)=>{
						console.log(res[1].code)
						let obj={}
						obj.code=res[1].code
						obj.key="ZHQQ_SM"
						 api.login(JSON.stringify(obj)).then((res)=>{
							 uni.setStorageSync("phone",res.data.body.phone)
							 this.phone=res.data.body.phone
							 this.openid=res.data.body.openId
							 uni.setStorageSync("openid",res.data.body.openid)
							 this.uUID=!uni.getStorageSync("uUID")
							 if(!this.uUID){
							 	 if(this.phone){
							 		fun();
							 		}
							 	 else {
							 	this.showDialogPhone=true 
							 	}			 
							 }
							else {
							this.showDialogUuid=true
							}
						}).catch()
					})
				}
				else {
					if(uni.getStorageSync("uUID")){
					 	 if(uni.getStorageSync("phone")){
					 		fun();
					 		}
					 	 else {
					 	this.showDialogPhone=true 
					 	}			 
					 }
					else {
					this.showDialogUuid=true
					}
				}
			},
			//打开sku
			openSku() {
			  this.judge(()=>{
				this.isPurchase=false;
				 this.showSku = true;
				uni.hideTabBar();
				this.$refs.sku.init(this.id);
			  });
			},
			openSkuPurchase(){
			   this.judge(()=>{
			   		this.isPurchase=true
			   		this.showSku = true;
			   		uni.hideTabBar();
			   		this.$refs.sku.init(this.id,this.shareUserId);
			   });
			},
			hanldeUpdataCar(data){
					this.showSku = false;
					uni.showTabBar();
			},
			closePopup(){
					  this.showSku=false,
					  uni.showTabBar();
			},
			goCar(){
				this.judge(()=>{
					uni.switchTab({
						url:"../cart/cart"
					})
				});
			},
			goHome(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			gotoEvaluate(){
			   if(this.shared){
			   	uni.login().then((res)=>{
			   		console.log(res[1].code)
			   		let obj={}
			   		obj.code=res[1].code
			   		obj.key="ZHQQ_SM"
			   		 api.login(JSON.stringify(obj)).then((res)=>{
			   			 uni.setStorageSync("phone",res.data.body.phone)
			   			 this.phone=res.data.body.phone
			   			 this.openid=res.data.body.openid
			   			 uni.setStorageSync("openid",res.data.body.openid)
			   			 this.uUID=!uni.getStorageSync("uUID")
			   			 if(!this.uUID){
			   			 	 if(this.phone){
			   			 		uni.navigateTo({
			   			 			url:`../evaluate/evaluate?id=${this.id}&evaluateTagList=${ JSON.stringify(this.dataObj.evaluateTagList) }`
			   			 		})
			   			 		}
			   			 	 else {
			   			 	this.showDialogPhone=true 
			   			 	}			 
			   			 }
			   			else {
			   			this.showDialogUuid=true
			   			}
			   		}).catch()
			   	})
			   }
			   else {
			   	if(uni.getStorageSync("uUID")){
			   	 	 if(uni.getStorageSync("phone")){
			   	 		uni.navigateTo({
			   	 			url:`../evaluate/evaluate?id=${this.id}&evaluateTagList=${ JSON.stringify(this.dataObj.evaluateTagList) }`
			   	 		})
			   	 		}
			   	 	 else {
			   	 	this.showDialogPhone=true 
			   	 	}			 
			   	 }
			   	else {
			   	this.showDialogUuid=true
			   	}
			   }
			},
			goDetail(i){
				uni.navigateTo({
					url:`../detail/detail?id=${i}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-wxChat{
		 color: #323233;
		 font-size: 18rpx;
		 text-align: center;
	}
	.btn-fixed-wxChat{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		margin-top: 16rpx;
	}
	.line-xian{
		width: 1rpx;
		height: 100%;
		background: #a3a3a3;
	}
	.btn-cancle{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.btn-div{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 100rpx;
	}
	.content-title{
		width: 100%;
		text-align: center;
		padding-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		color: #000000;
		font-weight: 500;
	}
	.content-text{
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #303133;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #a3a3a3;
	}
	 button::after { border: none; }
	.content-button{
	  width: 50%;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color: #303133;
	  background-color:#FFFFFF;
	}
	.price-share::after{
		border: none;
	}
	.content-item{
		display: flex;
		flex-direction: column;
		margin-right: 3vw;
		margin-bottom: 20rpx;
		width: 28vw;
	}
	.item-text {
	        color: #333;
	        font-size: 3.7vw;
	        text-overflow: ellipsis;
	        overflow: hidden;
			width: 100%;
			white-space: nowrap;
	    }
	 .item-cost {
	        margin-top: 2vw;
	        color: #cc363c;
	        font-size: 3.8vw;
			width: 100%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
	    }
	.content-contain{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.guess-contain{
		width: 100vw;
		padding: 5vw;
		padding-right: 0vw;
		background: #fff;
		margin-top: 50rpx;
	}
	 .guess-title {
	    $height: autoH(750px, 98px);
	    height: calc(100vw / #{$height} - 5vw);
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
		padding-right: 5vw;
	    .guess-title--text {
	      font-size: 4.5vw;
	      font-weight: bold;
	    }
	    .guess-title--more {
	      color: #cb353b;
	      font-size: 4.5vw;
	      font-weight: 500;
	      display: flex;
	      align-items: center;
	    }
	  }
	@function autoH($width, $height) {
	  @return $width/$height;
	}
	.information-evaluate {
	  width: 100vw;
	  margin-top: 5vw;
	  $height: autoH(750px, 378px);
	  min-height: calc(100vw / #{$height});
	  background: #fff;
	  .evaluate-title {
	    $height: autoH(750px, 98px);
	    height: calc(100vw / #{$height});
	    padding: 5vw;
	    font-size: 4.5vw;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    .evaluate-title--star {
	      display: flex;
	      align-items: center;
	      color: #212121;
	      font-weight: bold;
	    }
	    .evaluate-title--num {
	      color: #888888;
	      display: flex;
	      align-items: center;
	      font-size: 4.2vw;
	    }
	  }
	  .evaluate-content {
	    padding: 2vw 5vw 5vw 5vw;
	    .evaluate-content--opt {
	      background: #ebf1f7;
	      border-radius: 4vw;
	      padding: 2vw;
	      height: 8vw;
	      color: #212121;
	      font-size: 3.6vw;
	      margin-right: 2vw;
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      font-weight: 500;
	      margin-bottom: 2vw;
	    }
	    .evaluate-content--info {
	      margin-top: 4vw;
	      & > view:first-child {
	        display: flex;
	        justify-content: space-between;
			align-items: center;
	        & > view {
	          display: flex;
	          align-items: center;
	          color: #222222;
	          font-size: 3.7vw;
	        }
	      }
	      & > view:last-child {
	        margin: 3vw 0 0 13vw;
	        font-size: 3.8vw;
	        color: #222;
	      }
	    }
	  }
	}
	.information-evaluate:active {
	  background: #f2f3f5;
	}
	.detail-img{
		width: 100%;
	}
	.contain-img{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.detail-title{
		color: #212121;
		font-weight: bold;
		font-size: 4.5vw;
		padding: 30rpx 0rpx;
	}
	.information-detail{
		width: 100vw;
		box-sizing: border-box;
		padding: 0 35rpx;
		padding-bottom: 30rpx;
		margin-top: 40rpx;
		background: #fff;
	}
	.information-title {
	  background: #fff;
	  width: 100vw;
	  padding: 0 35rpx;
	  padding-bottom: 30rpx;
	  .title-price {
	    height: 14vw;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    .price-item {
	      display: flex;
	      align-items: baseline;
	      .price-item--now {
	        font-size: 6.5vw;
	        color: #cc363c;
	        font-weight: bold;
	      }
	      .price-item--pass {
	        font-size: 3.5vw;
	        color: #aaaaaa;
	        text-decoration: line-through;
	        margin-left: 2.5vw;
	      }
	    }
	    .price-share {
	      display: flex;
	      align-items: center;
	      font-size: 3.5vw;
	      background: #f7f8f9;
	      border-radius: 2vw 2vw 2vw 2vw;
	      justify-content: center;
	      width: 19vw;
	      height: 7vw;
	      color: #666;
	      position: absolute;
	      right: 0;
	      .share-icon {
	        height: 3.5vw;
	        width: 3.5vw;
	        margin-right: 2vw;
	        margin-top: 0.5vw;
	      }
	    }
	  }
	  .title-title {
	    color: #222222;
	    font-size: 5vw;
	    font-weight: bold;
	  }
	  .title-introduce {
	    margin-top: 1vw;
	    color: #888;
	    font-size: 3.8vw;
	  }
	}
	.wrap {
	    width: 100vw;
		padding: 0rpx 35rpx;
		background: #FFFFFF;
	}
   .content {
   	width: 100vw;
   	min-height: 100vh;
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   	background: rgb(245,247,249);
	padding-bottom: 180rpx;
	margin-bottom: 1rpx;
   }
</style>
